<template>
	<view class="record-page">

		<view class="search">
			<view class="">
				<u-icon name="search"></u-icon>
				<input type="text" v-model="search" placeholder="搜索你想要的记录" confirm-type="search"
					@confirm="getList(true)" />
			</view>
		</view>

		<!-- 列表 -->
		<view class="list">
			<view class="item" v-for="item in list" :key="item.id" @click="gotoDetail(item.id)">
				<view class="">
					<view class="t1">
						<text>{{item.title}}</text>
					</view>
					<view class="t2">
						<text>{{item.create_time}}</text>
					</view>
				</view>
				<image src="../../static/icon-right.png" mode="aspectFit"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				search: '',
				list: [],
				pageSize: 10
			};
		},
		onLoad() {},
		onShow() {
			if (this.list.length == 0) this.getList(true)
		},
		onPullDownRefresh() {
			this.getList(true)
		},
		methods: {
			getList(refresh) {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})

				const query = {
					search: this.search,
					page: refresh ? 1 : parseInt(this.list.length / this.pageSize) + 1,
					list_row: this.pageSize
				}

				this.$u.post('/evaluationrecordlist', query).then(res => {
					uni.stopPullDownRefresh()
					if (refresh) {
						this.list = res.data
					} else {
						this.list.push(...res.data)
					}
				});
			},

			gotoDetail(id) {
				uni.navigateTo({
					url: `/pagesA/record-detail/record-detail?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.record-page {
		min-height: 100vh;
		background-color: white;

		.search {
			padding: 20rpx 30rpx;

			>view {
				height: 68rpx;
				padding: 0 20rpx;
				border-radius: 34rpx;
				background-color: #F5F5F5;
				display: flex;
				align-items: center;

				>input {
					margin-left: 20rpx;
					flex: 1;
				}
			}
		}

		.list {

			.item {
				padding: 32rpx 30rpx;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				background-color: #f5f5f5;

				>view {
					flex: 1;

					.t1 {
						font-size: 32rpx;
						font-weight: bold;
						line-height: 44rpx;
						color: #131415;
					}

					.t2 {
						font-size: 28rpx;
						font-weight: 400;
						line-height: 40rpx;
						color: #999999;
					}
				}

				>image {
					width: 16rpx;
					height: 26rpx;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>
